
<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        频道
        <small>列表</small>
    </h1>
</section>

<style>
    .text-short{}
</style>

<!-- Main content -->
<section class="content" id="lives-channels-app">

    <div class="row">
        <div class="col-md-6">
            <a class="btn btn-default" @click="getList">刷新</a>
            <button class="btn btn-primary" @click="add">添加</button>
        </div>
        <div class="col-md-2">
            <div class="form-group">
            </div>
        </div>
    </div>

    <div class="row" v-show="!show.edit">
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>老师</th>
                    <th>状态</th>
                    <th>cid</th>
                    <th>推流地址</th>
                    <th>在线人数(实际/运营)</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in list">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.teacher_name || '-'}}</td>
                    <td>{{StatusNames[item.status]}}</td>
                    <td>{{item.cid}}</td>
                    <td><div :title="item.pushurl" class="text-short" >{{item.pushurl}}</div></td>
                    <td>{{item.number_online}} / {{item.online_num}}</td>
                    <td>
                        <a class="btn btn-primary btn-xs" @click="edit(item)">修改</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="100">
                        <page :rows="page.rows" :last="page.last" v-model="page.page"></page>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="row" v-if="show.edit">
        <div class="col-md-4 col-md-offset-2">
            <h3>添加</h3>
            <div class="form" role="form">
                <div class="form-group">
                    <label>频道名称：</label>
                    <input class="form-control" v-model="tmp.name">
                </div>
                <div class="form-group">
                    <label>选择主播老师：</label>
                    <select class="form-control" v-model="tmp.teacher_id">
                        <option :value="0">无</option>
                        <option v-for="t in teachers" :value="t.id">{{t.realname}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>简介（可以用于seo搜索）：</label>
                    <textarea class="form-control" v-model="tmp.summary"></textarea>
                </div>
                <div class="form-group">
                    <label>公共信息：</label>
                    <textarea class="form-control" v-model="tmp.announcement"></textarea>
                </div>

                <div class="form-group">
                    <label>直播间类型：</label>
                    <select class="form-control" v-model="tmp.official">
                        <option :value="1">官方</option>
                        <option :value="2">非官方</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>在线人数：</label>
                    <input class="form-control" v-model="tmp.online_num">
                </div>

                <div class="form-group">
                    <a class="btn btn-primary" @click="save">保存</a>
                    <a class="btn btn-default" @click="show.edit = false">关闭</a>
                </div>
            </div>
        </div>
    </div>

</section>
<!-- /.content -->

<script>
    var lives_channels_app = new Vue({
        el: '#lives-channels-app',
        data: {
            list: [],
            teachers: [],
            page: {
                last: 1,
                page: 1,
                rows: 10
            },
            tmp: {name:''},
            show: {
                edit: false
            },
            StatusNames: {
                0: '空闲',
                1: '直播',
                2: '禁用',
            }
        },
        created: function () {
            this.getList();
            ajax({
                uri: '/common/teacher_names',
                success: function (resp) {
                    this.teachers = resp.data;
                }.bind(this)
            })
        },
        methods: {
            getList(){
                ajax({
                    uri: '/lives/channel_list',
                    data: this.page,
                    success: function(resp){
                        resp.data.forEach(function (o, i) {
                            o.edit_enable = false;
                        });
                        this.list = resp.data;
                        this.page.last = resp.last_page;
                    }.bind(this)
                });
            },
            add: function () {
                this.tmp = {name:'',official:1};
                this.show.edit = true;
            },
            edit: function (item) {
                this.tmp = Object.assign({}, item);
                this.show.edit = true;
            },
            save: function () {

                if (!this.tmp.name) {
                    alert('名称不能为空');
                    return;
                }

                ajax({
                    uri: '/lives/channel_save',
                    data: this.tmp,
                    success: function (resp) {
                        this.show.edit = false;
                        this.getList();
                    }.bind(this)
                })
            }
        },
        watch: {
            'page.page': function (nv, ov) {
                this.getList();
            }
        }
    })
</script>
